<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title{
            height: 40px;
            width: 100%;
            margin-top: 0px;
            list-style-type: none;
            background-color: #eaeaea;
            font-size: 13px;
        }
        .title a:hover{
            color: red;
            cursor: pointer;
            text-align: center;
            list-style-type: none;
            margin: 0 auto;
        }
        .title li{
            display: inline;
            top: 50%;
            font-family: "Microsoft Yahei";
        }
        /*.head{*/
            /*height: 90px;*/
            /*width: 700px;*/
            /*position: relative;*/
            /*margin-top: 0px;*/
            /*margin-bottom: 0px;*/
        /*}*/
        /*.head li{*/
            /*list-style-type: none;*/
            /*text-align: center;*/
        /*}*/
        .w{
            margin: 0 auto;
            width: 100%;
        }
        .logo{
            float: left;
            width: 30%;
            height: 60px;
            padding: 20px 0 20px 60px;
        }
        .lg{
            display: block;
            height: 60px;
            margin-left: 330px;
            background-image: url("logo.jpg");
            background-repeat: no-repeat;
            background-position: 0px -11px;
        }
        .search{
            width: 25%;
            height: 60px;
            float: left;
            margin: 20px 0px 20px 0px;
        }
        .text{
            display: block;
            float: left;
            height: 24px;
            width: 300px;
            line-height: 24px;
            color: #666666;
            padding: 2px 2px 2px 2px;
            margin-top: 8px;
            margin-bottom: 4px;
            border-width: 2px 0 2px 2px;
            border-color: red;
            border-style: solid;
            outline: 0;
            font-size: 14px;
        }
        .button{
            display: block;
            height: 35px;
            width: 80px;
            color: white;
            background-color: darkred;
            float: left;
            margin-top: 6px;
            font-size: 16px;
            font-family: "Microsoft Yahei";
        }
        .button:hover{
            cursor: pointer;
        }
        .cw{
            display: block;
            margin-top: 0px;
            margin-bottom: 26px;
            float: left;
            height: 60px;
            width: 35%;
        }
        .la{
            display: block;
            height: 30px;
            width: 120px;
            margin-top: 28px;
            margin-bottom: 26px;
            color: black;
            background-color: white;
            font-size: 14px;
            font-family: "Microsoft Yahei";
            border: 2px solid silver;
        }
        .fo{
            /*width: 100px;*/
            display: block;
            height: 28px;
            width: 110px;
            margin: 5px 0px 0px 26px;
        }
        .cw a:hover{
            cursor: pointer;
        }
        .he{
            margin: 0;
            float: left;
            height: 50px;
            width: 100%;
            color: white;
            background-color: darkred;
        }
        .he div{
            float: left;
            text-align: center;
            height: 50px;
            /*margin-top: 16px;*/
            font-size: 18px;
            font-family: "Microsoft Yahei";
        }
        .he div a:hover{
            background-color: crimson;
            cursor: pointer;
        }
        .he div a{
            display: block;
            padding: 0;
            margin-top: 0px;
            margin-bottom: 0px;
            text-align: center;
            line-height: 50px;
            height: 50px;
            width: 100%;
        }
        .mu{
            margin: 0 auto;
            float: left;
            height: 500px;
            width: 100%;
        }
        .le{
            display: block;
            margin: 0px;
            float: left;
            width: 35%;
            height: 800px;
            border-right: #666666;
        }
        #le-li{
            height: 500px;
            border: 2px solid silver;
            margin-left: 278px;
            font-size: 14px;
            font-family: "Microsoft Yahei";
        }
        #le-li div{
            margin: 0px;
            width: 100%;
            height: 50px;
            float: left;
            color: white;
            background-color: darkred;
            text-align: center;
            vertical-align: middle;
            line-height: 50px;
        }
        #le-li div:hover{
            width: 100%;
            height: 50px;
            float: left;
            color: darkred;
            background-color: white;
            cursor: pointer;
            text-align: center;
            vertical-align: middle;
            line-height: 50px;
        }
        .ri{
            display: block;
            margin: 0px;
            float: left;
            width: 65%;
            height: 800px;
        }
        .ri div div:hover{
            cursor: pointer;
        }
        .hh{
            margin-left: 20px;
            height: 30px;
            line-height: 30px;
            vertical-align: middle;
            font-family: "Microsoft Yahei";
            font-size: 14px;
            color: black;
            border-bottom: 2px solid darkred;
        }
        .hm{
            margin-left: 20px;
            height: 50px;
            line-height: 50px;
            vertical-align: middle;
            border-left: 1px solid silver;
            border-right: 1px solid silver;
            border-bottom: 1px solid silver;
        }
        .so{
            margin: 10px;
            margin-left: 20px;
            height: 50px;
            border-top: 1px solid silver;
            border-bottom: 1px solid silver;
            border-left: 1px solid silver;
            border-right: 1px solid silver;
        }
        .so .le{
            height: 50px;
            width: 80%;
            float: left;
            line-height: 50px;
            vertical-align: middle;
        }
        .so .ri{
            height: 50px;
            width: 20%;
            float: right;
            line-height: 50px;
            vertical-align: middle;
        }
        .vv{
            margin: 5px;
            float: left;
            border: 2px solid darkred;
            height: 300px;
            width: 300px;
        }
        .im{
            margin: 5px;
            background-image: url("aaa.jpg");
            background-repeat: no-repeat;
            background-position: 20px 0px;
            height: 200px;
            line-height: 50px;
            vertical-align: middle;
            text-align: center;
        }
        .no{

        }
    </style>
</head>
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px">
    <ul class="title" style="margin-bottom: 0px">
        <div style="margin-top: 10px; width: 40%;float: left; text-align: center">
            <li> <a>*收藏本站</a></li>
        </div>
        <div style="margin-top: 10px; width: 60%;float: right; text-align: center">
            <li> <a>登录</a></li>
            <li> <a>注册</a></li>
            <li> <a>我的订单</a></li>
            <li> <a>我的收藏</a></li>
            <li> <a>VIP会员俱乐部</a></li>
            <li> <a>客户服务</a></li>
            <li> <a>关注</a></li>
            <li> <a>手机版</a></li>
        </div>
    </ul>
    <div class="w">
        <div class="logo">
            <div class="lg"></div>
        </div>
        <div class="search">
            <input type="text" class="text">
            <button class="button">搜索</button>
        </div>
        <div class="cw">
            <div class="la">
                <a class="fo">我的购物车</a>
            </div>
        </div>
    </div>
    <div class="he">
        <div style="width: 40%; margin-left: -100px"> <a style="width: 50%; margin-left: 384px">全部商品分类</a></div>
        <div style="width: 6%"><a>首页</a></div>
        <div style="width: 6%"><a>网上超市</a></div>
        <div style="width: 6%"><a>水果超市</a></div>
        <div style="width: 6%"><a>超级订餐</a></div>
        <div style="width: 6%"><a>生活娱乐</a></div>
        <div style="width: 6%"><a>研究院</a></div>
    </div>
    <div class="le">
        <div id="le-li">
            <div>家用电器</div>
            <div>手机</div>
            <div>电脑</div>
            <div>家居</div>
            <div>男装</div>
            <div>各户化妆</div>
        </div>
    </div>
    <div class="ri">
        <div class="hh">福特>蒙迪欧>2.0T</div>
        <div class="hm">您已选择：苹果</div>
        <div class="hm">&nbsp&nbsp材质：苹果</div>
        <div class="hm">&nbsp&nbsp品牌：苹果</div>
        <div class="hm">&nbsp&nbsp风格：苹果</div>
        <div class="so">
            <div class="le">排序:&nbsp&nbsp价格&nbsp&nbsp销量&nbsp&nbsp最新
                <div style="float: right">共商品xx件</div>
            </div>
            <div class="ri">
                <div style="float: left; height: 50px; width: 50px;; line-height: 50px; vertical-align: middle; margin-left: 50px">1/675</div>
                <div style="float: left; margin: 8px; border: 1px solid silver; height: 30px; width: 30px; line-height: 30px; vertical-align: middle; text-align: center;">
                    &lt
                </div>
                <div style="float: left; margin: 8px; border: 1px solid silver; height: 30px; width: 30px; line-height: 30px; vertical-align: middle; text-align: center;">
                    &gt
                </div>
            </div>
        </div>
        <div style="margin-top: 10px; margin-left: 20px; margin-right: 20px">
            <div class="vv">
                <div class="im"></div>
                <div style="margin: 20px; height: 10px; line-height: 10px; vertical-align: middle; text-align: center">ThinkPad X250</div>
                <div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 100px; line-height: 20px; vertical-align: middle">&yen 7000</div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 120px; line-height: 20">
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; text-align: center">-</div>
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            <input style="margin:0px; float:left; height: 15px; width: 20px" type="text">
                        </div>
                        <div style="float: left; margin: 0px; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            +
                        </div>
                        <div style="float: left; margin-left: 10px; height: 25px; width: 24px; line-height: 24px; vertical-align: middle; text-align:center; color: white;
                        background-color: darkred; font-size: 14px; font-family: 'Microsoft Yahei'">
                            买
                        </div>
                    </div>
                </div>
            </div>
            <div class="vv">
                <div class="im"></div>
                <div style="margin: 20px; height: 10px; line-height: 10px; vertical-align: middle; text-align: center">ThinkPad X250</div>
                <div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 100px; line-height: 20px; vertical-align: middle">&yen 7000</div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 120px; line-height: 20">
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; text-align: center">-</div>
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            <input style="margin:0px; float:left; height: 15px; width: 20px" type="text">
                        </div>
                        <div style="float: left; margin: 0px; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            +
                        </div>
                        <div style="float: left; margin-left: 10px; height: 25px; width: 24px; line-height: 24px; vertical-align: middle; text-align:center; color: white;
                        background-color: darkred; font-size: 14px; font-family: 'Microsoft Yahei'">
                            买
                        </div>
                    </div>
                </div>
            </div>
            <div class="vv">
                <div class="im"></div>
                <div style="margin: 20px; height: 10px; line-height: 10px; vertical-align: middle; text-align: center">ThinkPad X250</div>
                <div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 100px; line-height: 20px; vertical-align: middle">&yen 7000</div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 120px; line-height: 20">
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; text-align: center">-</div>
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            <input style="margin:0px; float:left; height: 15px; width: 20px" type="text">
                        </div>
                        <div style="float: left; margin: 0px; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            +
                        </div>
                        <div style="float: left; margin-left: 10px; height: 25px; width: 24px; line-height: 24px; vertical-align: middle; text-align:center; color: white;
                        background-color: darkred; font-size: 14px; font-family: 'Microsoft Yahei'">
                            买
                        </div>
                    </div>
                </div>
            </div>
            <div class="vv">
                <div class="im"></div>
                <div style="margin: 20px; height: 10px; line-height: 10px; vertical-align: middle; text-align: center">ThinkPad X250</div>
                <div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 100px; line-height: 20px; vertical-align: middle">&yen 7000</div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 120px; line-height: 20">
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; text-align: center">-</div>
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            <input style="margin:0px; float:left; height: 15px; width: 20px" type="text">
                        </div>
                        <div style="float: left; margin: 0px; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            +
                        </div>
                        <div style="float: left; margin-left: 10px; height: 25px; width: 24px; line-height: 24px; vertical-align: middle; text-align:center; color: white;
                        background-color: darkred; font-size: 14px; font-family: 'Microsoft Yahei'">
                            买
                        </div>
                    </div>
                </div>
            </div>
            <div class="vv">
                <div class="im"></div>
                <div style="margin: 20px; height: 10px; line-height: 10px; vertical-align: middle; text-align: center">ThinkPad X250</div>
                <div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 100px; line-height: 20px; vertical-align: middle">&yen 7000</div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 120px; line-height: 20">
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; text-align: center">-</div>
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            <input style="margin:0px; float:left; height: 15px; width: 20px" type="text">
                        </div>
                        <div style="float: left; margin: 0px; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            +
                        </div>
                        <div style="float: left; margin-left: 10px; height: 25px; width: 24px; line-height: 24px; vertical-align: middle; text-align:center; color: white;
                        background-color: darkred; font-size: 14px; font-family: 'Microsoft Yahei'">
                            买
                        </div>
                    </div>
                </div>
            </div>
            <div class="vv">
                <div class="im"></div>
                <div style="margin: 20px; height: 10px; line-height: 10px; vertical-align: middle; text-align: center">ThinkPad X250</div>
                <div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 100px; line-height: 20px; vertical-align: middle">&yen 7000</div>
                    <div style="margin: 10px; float: left; margin-left: 20px; font-size: 20px; height: 20px; width: 120px; line-height: 20">
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; text-align: center">-</div>
                        <div style="float: left; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            <input style="margin:0px; float:left; height: 15px; width: 20px" type="text">
                        </div>
                        <div style="float: left; margin: 0px; border: 1px solid silver; height: 20px; width: 20px;line-height: 20px; vertical-align: middle; text-align: center">
                            +
                        </div>
                        <div style="float: left; margin-left: 10px; height: 25px; width: 24px; line-height: 24px; vertical-align: middle; text-align:center; color: white;
                        background-color: darkred; font-size: 14px; font-family: 'Microsoft Yahei'">
                            买
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>